<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Spring Hibernate PostgreSQL CRUD</title>
</head>
<body>
<h1>Users</h1>
<ul id="users">
</ul>

<form id="create-user-form">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name"><br><br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br><br>
    <button type="submit">Create User</button>
</form>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    $(document).ready(function () {
        $.ajax({
            type: "GET",
            url: "/api/users",
            success: function (data) {
                data.forEach(function (user) {
                    $("#users").append(`<li>${user.name} - ${user.email}</li>`);
                });
            }
        });

        $("#create-user-form").submit(function (event) {
            event.preventDefault();
            const name = $("#name").val();
            const email = $("#email").val();

            $.ajax({
                type: "POST",
                url: "/api/users",
                data: JSON.stringify({name: name, email: email}),
                contentType: "application/json",
                success: function (data) {
                    $("#users").append(`<li>${data.name} - ${data.email}</li>`);
                }
            });
        });
    });
</script>
</body>
</html>